<template>
    <div class="basics-layout_body mt-lg mb-lg flex">
        <div class="menu">
            <div class="menu-item pl-20 pointer" :class="subscript === index ? 'menu-item_selected' : 'menu-item_not'" v-for="(item, index) in list" :key="index" @click="handleMenuItem(index)">
                <div class="menu-item_img">
                    <img :src="item.selected" v-if="subscript === index" />
                </div>
                <div class="menu-item_title ml-sm">{{ item.name }}</div>
            </div>
        </div>
        <div class="flex-1">
            <component :is="list[subscript].module" :isMemberCenter="true" />
        </div>
    </div>
</template>
<script setup>
import { ref, markRaw, onMounted } from "vue";
import cBasicData from "./BasicData/index.vue";
import cEntCert from "./EntCert/index.vue";
import cChangePassword from "./ChangePassword/index.vue";
import cPaymentPassword from "./PaymentPassword/index.vue";
import cShoppingCar from "../ShoppingTrolley/components/ShoppingCar.vue";
import cAuthentication from "../Authentication/components/authentication.vue";

import cOrderList from "./Order/index.vue";
import { useRoute } from "vue-router";
const route = useRoute();
const subscript = ref(0);

onMounted(() => {
    const item = route.query;
    if (item && item.type) {
        subscript.value = item.type * 1;
    }
});
const handleMenuItem = (i) => {
    subscript.value = i;
};

const list = ref([
    {
        selected: new URL(`@/assets/img/icon／order_fill.png`, import.meta.url)
            .href,
        unchecked: new URL(`@/assets/img/icon／order.png`, import.meta.url).href,
        name: "我的订单",
        module: markRaw(cOrderList),
    },
    {
        selected: new URL(`@/assets/img/icon／password_fill.png`, import.meta.url)
            .href,
        unchecked: new URL(`@/assets/img/icon／password.png`, import.meta.url).href,
        name: "我的购物车",
        module: markRaw(cShoppingCar),
    },
    {
        selected: new URL(`@/assets/img/icon／order_fill.png`, import.meta.url)
            .href,
        unchecked: new URL(`@/assets/img/icon／order.png`, import.meta.url).href,
        name: "企业认证",
        module: markRaw(cAuthentication),
    },
    {
        selected: new URL(`@/assets/img/icon／password_fill.png`, import.meta.url)
            .href,
        unchecked: new URL(`@/assets/img/icon／password.png`, import.meta.url).href,
        name: "修改登录密码",
        module: markRaw(cChangePassword),
    },
]);
</script>
<style lang="less" scoped>
.menu {
    width: 208px;
    margin-right: 15px;
    background: #fff;
    border-radius: 6px;
    min-height: 450px;
    .menu-item_selected {
        background: linear-gradient(65deg, #6cbbfb 0%, #3a85f5 100%);
        .menu-item_title {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
        }
    }
    .menu-item_not {
        background: #fff;
        .menu-item_title {
            font-size: 14px;
            font-weight: 400;
            color: #000;
        }
    }
    .menu-item {
        display: flex;
        align-items: center;
        height: 48px;
        .menu-item_img {
            width: 16px;
            height: 16px;
        }
    }
}
</style>